<template>
	<view>
		<u-navbar title="提现"></u-navbar>
		<view class="content">
			<view class="top dis_f_sb_c">
				<view class="dis_f_l_c" style="width: 100%;">
					<image src="../../../static/logo.png" mode="aspectFill"></image>
					<view class="dis_f_sb_c" style="width: calc(100% - 98rpx);">
						<view class="dis_f_co">
							<view class="title">111</view>
							<!-- <view class="text">{{user.nickname}}</view> -->
						</view>
						<view class="dis_f_co">
							<view class="title">当前余额</view>
							<view class="text">￥100.00</view>
						</view>
					</view>
				</view>
			</view>
			<view class="top dis_f_co">
				<view class="title" style="margin-bottom: 48rpx;">提现金额</view>
				<view class="dis_f_l_c dis_f_w">
					<view style="margin-right: 24rpx;" v-for="(item,index) in je_list" :key="item.id"
						@click="selectColor(index,item)">
						<view class="jin_e dis_f_c_c" s :class="[ item.selected ? 'jin_e2' : 'jin_e']">
							{{item.name}}元
						</view>
					</view>
				</view>
				<view style="color: #777;font-size: 22rpx;">提现扣除手续费5%</view>
			</view>
			<!-- 提现 -->
		</view>
		<view class="next dis_f_c_c" @click="go_next">提现</view>
		<u-keyboard default="" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false"
			v-model="show" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange" @backspace="onBackspace">
			<view>
				<view class="u-text-center u-padding-20 money">
					<text>{{je}}</text>
					<text class="u-font-20 u-padding-left-10">元</text>
					<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password"
						:disabled-keyboard="true" @finish="finish"></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '',
				// 充值金额
				je_list: [{
						name: '1',
						id: 1,
						selected: false
					},
					{
						name: '66',
						id: 2,
						selected: false
					},
					{
						name: '200',
						id: 3,
						selected: false
					},
					{
						name: '500',
						id: 4,
						selected: false
					},
					{
						name: '1000',
						id: 5,
						selected: false
					},
				],
				je: '',
				text: '',
				text1: '',
				text2: '',
				text3: '',
				user: '',
				type: 0,
				title: '',
				cz: 0,
				zhaohao: '',
				show: false,
				password: '',
			};
		},
		onLoad(opt) {

		},
		methods: {

			showPop(flag = true) {
				this.password = '';
				this.show = flag;
			},
			onChange(val) {
				// console.log(this.password)
				if (this.password.length < 6) {
					this.password += val;

				}

				if (this.password.length >= 6) {
					console.log(this.password)
					this.$.ajax(1, 'post', 'index/checkpaypassword', {
						uid: uni.getStorageSync('uid'),
						token: uni.getStorageSync('token'),
						password: this.password,
					}, (res) => {
						console.log(res)
						if (res.code == 1) {
							this.$.ajax(1, 'post', 'index/settixianlog', {
								uid: uni.getStorageSync('uid'),
								token: uni.getStorageSync('token'),
								money: this.je,
								cate: this.type,
								account: this.zhaohao
							}, (res) => {
								console.log(res)
								if (res.code == 1) {
									this.$.ti_shi(res.msg)
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/mine/mine'
										})
									}, 1000)
								} else {
									this.$.ti_shi(res.msg)
								}

							})
							// this.$.ti_shi(res.msg)
						} else {
							this.password = ''
							this.$.ti_shi(res.msg)
						}

					})
					// this.pay();
				}
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			pay() {
				if (this.je == '') {
					this.$.ti_shi('请选择充值金额');
					return;
				}
				if (this.type == 1) { //微信支付
					this.$.ajax(1, 'post', 'wxpay/wxpay', {
						uid: uni.getStorageSync('uid'),
						token: uni.getStorageSync('token'),
						money: this.je,
					}, (res) => {
						// console.log(res)
						if (res.code == 1) {
							// console.log(res.data.timestamp)
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: {
									"appid": res.data.appid,
									"noncestr": res.data.noncestr,
									"package": "Sign=WXPay",
									"partnerid": res.data.partnerid,
									"prepayid": res.data.prepayid,
									"timestamp": res.data.timestamp,
									"sign": res.data.sign
								},
								success: function(res) {
									console.log(res);
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
						}

					})
				} else if (this.type == 2) {

				}
			},
			getuser() {
				this.$.ajax(1, 'post', 'getuser', {
					uid: uni.getStorageSync('uid'),
				}, (res) => {
					// console.log(res)
					if (res.code == 1) {
						this.user = res.userinfo
						// if(this.cz !=1){
						this.text2 = '提现扣除手续费' + this.user.shouxu * 100 + '%'
						// }
						if (this.type == 1) {
							this.zhaohao = this.user.wechat
						} else {
							this.zhaohao = this.user.alipay
						}
					}

				})
			},
			selectColor(index, item) {
				let that = this
				for (let items in that.je_list) { //这个循环的时候要用for in 来遍历 当前选中下标为true 其他的下标为false 避免多选
					that.je_list[items].selected = false;
					that.je_list[index].selected = true;
					that.je = that.je_list[index].name;
				}
				console.log(that.je)
			},
			go_next() {
				if (this.je == '') {
					this.$.ti_shi('请选择提现金额');
					return;
				}
				


			}
		}
	}
</script>

<style lang="scss">
	.dhl {
		// position: absolute;
		width: 100%;
		height: var(--status-bar-height);
		position: fixed;
		top: 0;
		z-index: 999;
	}

	.topbar {
		width: 100%;
		z-index: 999;
		height: 88rpx;
		position: fixed;
		top: var(--status-bar-height);
		font-size: 34rpx;
		color: #212730;
		font-weight: bold;
		// background-image: url(../../static/index/bg.png);
		// padding: 0 0 26rpx 0rpx;

		.top_jt {
			width: 18rpx;
			height: 32rpx;
			position: absolute;
			left: 40rpx;
			top: 28rpx;
		}
	}

	.content {
		width: 100%;
		// padding-top: calc(var(--status-bar-height) + 88rpx);

		.top {
			width: 100%;
			// height: 152rpx;
			background-color: #fff;
			padding: 36rpx 48rpx;
			margin-bottom: 18rpx;
			color: #222222;

			image {
				width: 80rpx;
				height: 80rpx;
				margin-right: 18rpx;
			}

			.title {
				font-size: 28rpx;
				line-height: 40rpx;

				margin-bottom: 8rpx;
			}

			.text {
				font-size: 22rpx;
				line-height: 32rpx;

			}

		}
	}

	.jin_e {
		border: 1rpx solid #EEEEEE;
		border-radius: 10rpx;
		width: 194rpx;
		height: 66rpx;
		color: #222;
		background-color: #fff;
		margin-bottom: 36rpx;
		border-radius: 38rpx;
	}

	.jin_e2 {
		border: none;

		background-color: #E23C63;
		width: 194rpx;
		height: 66rpx;
		color: #fff;
		margin-bottom: 36rpx;
		border-radius: 38rpx;
	}

	.next {
		position: fixed;
		bottom: 84rpx;
		left: 24rpx;
		width: 702rpx;
		height: 98rpx;
		border-radius: 50rpx;
		background-color: #E23C63;
		color: #fff;
	}

	.money {
		font-size: 80rpx;
		color: $u-type-warning;
		position: relative;

		.close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}

	.tips {
		color: $u-tips-color;
	}

	.zf_btn {
		color: #fff;
		background-color: #E23C63;
		border-radius: 20rpx;
		width: 100%;
		height: 88rpx;
	}
</style>
